/**
 * 结构库管理模块
 * 负责网格结构的选择和创建
 */
class StructureManager {
    constructor(elementManager) {
        this.elementManager = elementManager;
        this.setupStructureLibrary();
    }

    /**
     * 设置结构库功能
     */
    setupStructureLibrary() {
        const gridStructure = document.getElementById('gridStructure');
        const gridTooltip = document.getElementById('gridTooltip');
        const gridOptions = document.querySelectorAll('.grid-option');
        const cancelBtn = document.getElementById('cancelGrid');
        const confirmBtn = document.getElementById('confirmGrid');
        
        let selectedCols = 2; // 默认选择2列
        let isTooltipVisible = false;
        
        // 网格结构项点击显示气泡
        gridStructure.addEventListener('click', (e) => {
            e.stopPropagation();
            if (!isTooltipVisible) {
                this.positionTooltip(e.target, gridTooltip);
                gridTooltip.classList.add('show');
                gridStructure.classList.add('active');
                isTooltipVisible = true;
            } else {
                gridTooltip.classList.remove('show');
                gridStructure.classList.remove('active');
                isTooltipVisible = false;
            }
        });
        
        // 点击页面其他地方隐藏气泡
        document.addEventListener('click', (e) => {
            if (!gridStructure.contains(e.target) && !gridTooltip.contains(e.target)) {
                gridTooltip.classList.remove('show');
                gridStructure.classList.remove('active');
                isTooltipVisible = false;
            }
        });
        
        // 网格选项选择
        gridOptions.forEach(option => {
            option.addEventListener('click', (e) => {
                e.stopPropagation();
                // 移除其他选中状态
                gridOptions.forEach(opt => opt.classList.remove('selected'));
                // 添加选中状态
                option.classList.add('selected');
                selectedCols = parseInt(option.getAttribute('data-cols'));
            });
        });
        
        // 取消按钮
        cancelBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            gridTooltip.classList.remove('show');
            gridStructure.classList.remove('active');
            isTooltipVisible = false;
        });
        
        // 确定按钮
        confirmBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            this.createFullWidthGrid(selectedCols);
            gridTooltip.classList.remove('show');
            gridStructure.classList.remove('active');
            isTooltipVisible = false;
        });
        
        // 默认选择2列
        gridOptions[0].classList.add('selected');
    }

    /**
     * 定位气泡提示
     * @param {HTMLElement} target - 目标元素
     * @param {HTMLElement} tooltip - 气泡元素
     */
    positionTooltip(target, tooltip) {
        const rect = target.getBoundingClientRect();
        const tooltipRect = tooltip.getBoundingClientRect();
        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;
        
        // 计算最佳位置
        let left = rect.right + 10;
        let top = rect.top;
        
        // 如果右侧空间不够，显示在左侧
        if (left + tooltipRect.width > viewportWidth - 20) {
            left = rect.left - tooltipRect.width - 10;
        }
        
        // 如果左侧也不够，居中显示
        if (left < 20) {
            left = (viewportWidth - tooltipRect.width) / 2;
        }
        
        // 如果下方空间不够，向上调整
        if (top + tooltipRect.height > viewportHeight - 20) {
            top = viewportHeight - tooltipRect.height - 20;
        }
        
        // 确保不超出视口
        left = Math.max(20, Math.min(left, viewportWidth - tooltipRect.width - 20));
        top = Math.max(20, Math.min(top, viewportHeight - tooltipRect.height - 20));
        
        tooltip.style.left = left + 'px';
        tooltip.style.top = top + 'px';
    }

    /**
     * 创建全宽网格
     * @param {number} cols - 列数
     */
    createFullWidthGrid(cols) {
        const element = this.elementManager.createElement('grid', 0, 0, cols);
        element.style.width = '375px'; // 全画布宽度
        element.style.height = '150px';
        element.style.position = 'absolute';
        element.style.top = '0px';
        element.style.left = '0px';
        
        this.elementManager.renderElement(element);
        this.elementManager.selectElement(element);
    }
}

// 导出类（如果使用模块系统）
if (typeof module !== 'undefined' && module.exports) {
    module.exports = StructureManager;
}
